<template>
  <div class="chart-container">
    <div class="chart-box">
      <div ref="mainChart" class="mainChart" style="z-index: 9" ></div>
      <div class="handle-box" :style="{ zIndex: showCursor ? 10 : 0 }">
        <div :style="handleStyle" class="handle-content">
          <div v-for="n in  xNumber + 1" :key="n" draggable="true" style="position: relative; " @dragstart="handleDragStart($event, n)" @dragover.prevent="handleDragOver($event, n)" @dragenter="handleDragEnter($event, n)" @dragend="handleDragEnd($event, n)">
            <div v-if="showCursor" style="position: absolute; height: 100%; display: flex; justify-content: center; z-index: 2; ">
              <div :style="getLineStyle(n)" />
              <div v-if="n === cursor1 || n === cursor2" style="position: absolute; bottom: -18px; font-size: small; white-space: nowrap; border-radius: 18px; background-color: rgb(230, 162, 60); color: rgb(242, 246, 252); padding: 3px 5px; cursor: move; ">{{ n === cursor1 ? '光标1' : '光标2' }}</div>
            </div>
            <div v-if="n === currentPoint + 1" style="position: absolute; height: 100%; display: flex; justify-content: center; z-index: 1; width: 0;">
              <!-- <div style="position: relative; height: 100%; width: 1px; border: 1px solid rgb(221, 97, 97)" /> -->
              <img style="width: 45px; height: 45px; position: absolute; bottom: 28%; left: -45px;z-index:9999;" :src="pointIcon" />
              <div style="position: absolute; bottom: 31%; left: 3px; font-size: 5px; color: rgb(233, 30, 99); width: 60px; ">{{ list && list[index] && list[index].signalMachine }}</div>
            </div>
          </div>
        </div>
      </div>
      <el-divider />
      <div class="table-button">
        <!-- <el-button type="primary" plain size="mini" @click="xAxisHandle(-10)" round>横向扩展</el-button>
        <el-button type="primary" plain size="mini" @click="xAxisHandle(10)" round>横向收缩</el-button>
        <el-button type="primary" plain size="mini" @click="yAxisHandle(-20)" round>纵向扩展</el-button>
        <el-button type="primary" plain size="mini" @click="yAxisHandle(20)" round>纵向收缩</el-button> -->
        <el-button v-if="!showCursor" plain type="primary" size="mini" @click="() => showCursor = true" round>光标选择</el-button>
        <el-button v-if="showCursor" type="danger" size="mini" @click="() => showCursor = false" round>取消光标</el-button>
        <span style="margin-left: 10px; ">
          <slot name="chartHandle" />
        </span>
      </div>
      <div class="table-content">
        <el-table :data="cursorList" border size="mini" style="border-radius: 5px;" >
          <el-table-column type="index" label="光标" width="50" align="center" />
          <el-table-column prop="eventItem" label="记录说明" width="150" align="center" />
          <el-table-column prop="time" label="时间" width="160" align="center" />
          <el-table-column prop="kiloMeter" label="公里标" width="120" align="center" />
          <el-table-column prop="distance" label="距离" align="center" />
          <el-table-column prop="speed" label="速度" align="center" />
          <el-table-column prop="rateLimit" label="限速" align="center" />
          <el-table-column prop="speedElectricity" label="转速" align="center" />
          <el-table-column prop="pipePressure" label="管压" align="center" />
          <el-table-column prop="cylinderPressure" label="缸压" align="center" />
          <el-table-column prop="transaction" label="手柄" align="center" />
          <el-table-column prop="signals" label="信号" align="center" />
          <el-table-column prop="signalMachine" label="信号机号" align="center" />
          <el-table-column prop="cylinder1" label="均缸1" align="center" />
          <el-table-column prop="cylinder2" label="均缸2" align="center" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
// import { Component, Vue, Watch, Prop, Emit, Mixins } from 'vue-property-decorator'
// import { Analysis } from '@/views/analysis/mixins'
import { mixins } from './options.js';
import * as echarts from 'echarts';
// import LkjLayout from '@/views/analysis/layout/lkj/index.vue'
// import { AppModule } from '@/store/modules/app'
export default {
  props: {
    list: {
      type: Array,
      default: []
    },
    indexLKj: {
      type: Number,
      default: 0
    },
    currentType: {
      type: Number,
      default: 0
    },
    total: {
      type: Number,
      default: 0
    },
  },
  mixins: [mixins], //使用混入（mixin）
  data() {
    return {
      dragging: null,
      items: [],
      cursor1: 5,
      cursor2: 10,
      showCursor: false,
      chart: null,
      isCollapse: '',
      ins: 0,
      xNumber: 19,
      yMax: 0,
      index: 0,
      chart: {},
      pointIcon: require('@/assets/image/carw.png'),
    };
  },
  computed: {
    // 当调用这个属性时，会执行getter函数
    // xNumber: {
    //   get() {
    //     return this.chart.xNumber || 30;
    //   },
    //   // 当这个属性被赋值时，会执行setter函数
    //   set(value) {
    //     this.chart.xNumber = value;
    //   }
    // },
    // yMax: {
    //   get() {
    //     return this.chart.yMax || 0;
    //   },
    //   // 当这个属性被赋值时，会执行setter函数
    //   set(value) {
    //     this.chart.yMax = value;
    //   }
    // },
    cursor1Obj: {
      get() {
        const obj =
          this.list[this.indexLKj + this.cursor1 - this.currentPoint - 1] || {};
        return obj;
      },
      // 当这个属性被赋值时，会执行setter函数
      set(value) {
        const obj =
          this.list[this.indexLKj + this.cursor2 - this.currentPoint - 1] || {};
        return obj;
      }
    },
    width: {
      get() {
        return this.chart.width || 0;
      }
    },
    height: {
      get() {
        return this.chart.height || 0;
      }
    },
    // isCollapse: {
      // get() {
      //   return !AppModule.sidebar.opened;
      // }
    // },
    cursorList: {
      get() {
        return [this.cursor1Obj, this.cursor2Obj];
      }
    },
    currentPoint:{
      get() {
        const maxPoint = 15;
        const lastMaxPoint = this.xNumber - maxPoint - 1;
        const lastPoint = this.list.length - this.indexLKj - 2;
        if (this.indexLKj <= maxPoint) {
          return this.indexLKj;
        } else if (lastPoint <= lastMaxPoint) {
          return this.xNumber - lastPoint - 1;
        }
        return maxPoint;
      }
    },
    currentIndex: {
      get() {
        console.log('获取了currentIndex', this.indexLKj, this.currentPoint);
        return this.indexLKj - this.currentPoint;
      }
    },
    initOptions: {
      // 初始化配置信息
      get() {
        return {
          color: this.colors,
          tooltip: {
            backgroundColor: '#fff',
            borderColor: '#ddd',
            borderWidth: 1,
            trigger: 'axis',
            textStyle: {
              color: '#3c3c3c',
              fontSize: 16
            },
            axisPointer: {
              type: 'cross'
            },
            padding: 10,
            formatter(params) {
              let str = ''
              let name = ''
              for (let i = 0; i < params.length; i += 1) {
                if (params[i].seriesType === 'bar') {
                  str += ''
                } else if (params[i].seriesName === '信号灯') {
                  str += `<div style="height:8px;width:8px;border-radius:50%;background:${params[i].color};float:left;margin-top:8px;margin-right:5px;"></div>${params[i].seriesName}：${
                params[i].data.cabSignal
              }灯 <br>`
                } else if (params[i].seriesName === '零位') {
                  str += `<div style="height:8px;width:8px;border-radius:50%;background:${params[i].color};float:left;margin-top:8px;margin-right:5px;"></div>${params[i].seriesName}：${
                params[i].data ? '否' : '是'
              } <br>`
                } else {
                  name = `${params[i].name}<br>`
                  str += `<div style="height:8px;width:8px;border-radius:50%;background:${
                params[i].color
              };float:left;margin-top:8px;margin-right:5px;"></div>${params[i].seriesName}：${
                params[i].data
              } <br>`
                }
              }
              return `${name}${str}`
            }
          },
          axisPointer: {
            link: [{
              xAxisIndex: 'all'
            }],
            label: {
              backgroundColor: '#777',
              show: false
            }
          },
          grid: [{
              top: '10%',
              height: '52%',
              left: 60,
              right: 60
            },
            {
              top: '70%',
              height: '23%',
              left: 60,
              right: 60
            }
          ],
          legend: {
            data: [{
                name: '速度km/h',
                icon: 'circle'
              },
              {
                name: '转速r/m',
                icon: 'circle'
              },
              {
                name: '限速',
                icon: 'circle'
              },
              {
                name: '管压kPA',
                icon: 'circle'
              },
              {
                name: '缸压kPA',
                icon: 'circle'
              },
              {
                name: '零位',
                icon: 'circle'
              }
            ],
            textStyle: {
              color: '#FFFFFF'
            }
          },
          xAxis: [{
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              interval: 1,
              axisLine: {
                lineStyle: {
                  color: '#FFFFFF',
                  width: 1,
                  type: 'dashed'
                }
              },
              axisLabel: {
                color: '#FFFFFF',
                interval: 4
              },
              axisPointer: {
                label: {
                  color: 'black'
                }
              },
              data: [],
              boundaryGap: false
            },
            {
              type: 'category',
              gridIndex: 1,
              axisTick: {
                alignWithLabel: true
              },
              interval: 1,
              axisLine: {
                lineStyle: {
                  color: '#FFFFFF',
                  width: 1,
                  type: 'dashed'
                }
              },
              axisLabel: {
                color: '#FFFFFF',
                interval: 4
              },
              axisPointer: {
                label: {
                  color: 'black'
                }
              },
              data: [],
              boundaryGap: false
            },
            {
              show: false,
              type: 'category',
              gridIndex: 1,
              axisTick: {
                alignWithLabel: true
              },
              interval: 1,
              axisLine: {
                lineStyle: {
                  color: '#FFFFFF',
                  width: 1,
                  type: 'dashed'
                }
              },
              axisLabel: {
                color: '#FFFFFF',
                interval: 4
              },
              axisPointer: {
                show: false
              },
              data: [],
              position: 'top'
            }
          ],
          yAxis: [{
              id: 'speed',
              type: 'value',
              gridIndex: 0,
              name: '速度km/h',
              min: 0,
              max: 160,
              interval: 20,
              position: 'left',
              axisLine: {
                lineStyle: {
                  color: this.colors[0]
                }
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed'
                }
              }
            },
            {
              id: 'rotateSpeed',
              type: 'value',
              gridIndex: 0,
              name: '转速r/m',
              min: 0,
              max: 1600,
              interval: 200,
              position: 'right',
              axisLine: {
                lineStyle: {
                  color: this.colors[1]
                }
              },
              splitLine: {
                show: false
              }
            },
            {
              id: 'speedLimit',
              show: false,
              type: 'value',
              gridIndex: 0,
              name: '限速',
              min: 0,
              max: 160,
              position: 'right',
              offset: 80,
              axisLine: {
                lineStyle: {
                  color: this.colors[2]
                }
              },
              axisPointer: {
                show: false
              }
            },
            {
              show: false,
              type: 'value',
              gridIndex: 0,
              min: 0,
              max: 160,
              name: '信号灯'
            },
            {
              type: 'value',
              name: '管压kPA',
              gridIndex: 1,
              min: 0,
              max: 800,
              position: 'left',
              interval: 200,
              axisLine: {
                lineStyle: {
                  color: this.colors[3]
                }
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed'
                }
              }
            },
            {
              show: false,
              type: 'category',
              name: '零位',
              gridIndex: 1,
              position: 'right',
              axisLine: {
                lineStyle: {
                  color: this.colors[5]
                }
              },
              nameTextStyle: {
                height: 0
              },
              margin: 0,
              splitLine: {
                show: false
              },
              data: ['0', '1']
            },
            {
              show: false,
              type: 'value',
              gridIndex: 1,
              min: 0,
              max: 800,
              position: 'right',
              interval: 200,
              inverse: true
            },
            {
              show: false,
              type: 'value',
              name: '机车工况',
              gridIndex: 1,
              min: 0,
              max: 8,
              position: 'left',
              interval: 2,
              axisLine: {
                lineStyle: {
                  color: this.colors[5]
                }
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed'
                }
              }
            },
            {
              show: false,
              type: 'value',
              name: '分相',
              gridIndex: 0,
              min: 0,
              max: 10,
              position: 'left',
              interval: 1,
              axisLine: {
                lineStyle: {
                  color: this.colors[2]
                }
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed'
                }
              }
            }
          ],
          series: [{
              name: '速度km/h',
              type: 'line',
              data: [],
              showSymbol: false,
              emphasis: {
                scale: false
              },
              xAxisIndex: 0,
              yAxisIndex: 0,
              z: 3,
              animation: false,
              smooth: true
            },
            {
              name: '转速r/m',
              type: 'line',
              showSymbol: false,
              xAxisIndex: 0,
              yAxisIndex: 1,
              emphasis: {
                scale: false
              },
              data: [],
              animation: false,
              smooth: true
            },
            {
              name: '限速',
              type: 'line',
              xAxisIndex: 0,
              yAxisIndex: 2,
              showSymbol: false,
              data: [],
              emphasis: {
                scale: false
              },
              animation: false
            },
            {
              name: '管压kPA',
              type: 'line',
              showSymbol: false,
              xAxisIndex: 1,
              yAxisIndex: 4,
              emphasis: {
                scale: false
              },
              data: [],
              animation: false,
              smooth: true,
              z: 100
            },
            {
              name: '缸压kPA',
              type: 'line',
              showSymbol: false,
              xAxisIndex: 1,
              yAxisIndex: 4,
              emphasis: {
                scale: false
              },
              data: [],
              animation: false,
              smooth: true,
              z: 99
            },
            {
              name: '零位',
              type: 'line',
              showSymbol: false,
              xAxisIndex: 1,
              yAxisIndex: 7,
              emphasis: {
                scale: false
              },
              data: [],
              animation: false,
              step: true
            },
            {
              name: '信号灯',
              stack: '信号灯',
              type: 'pictorialBar',
              symbolSize: [10, -20],
              symbolOffset: [0, -14],
              data: [],
              xAxisIndex: 1,
              yAxisIndex: 6,
              z: 99,
              animation: false
            },
            {
              name: '定标',
              stack: '定标',
              type: 'bar',
              xAxisIndex: 0,
              yAxisIndex: 0,
              seriesLayoutBy: 'row',
              data: [],
              label: {
                  show: false,
                  position: 'insideRight'
              },
              barWidth: 2,
              animation: false
            },
            {
              name: '信号机',
              type: 'line',
              xAxisIndex: 1,
              yAxisIndex: 6,
              data: [],
              animation: false,
              lineStyle: {
                opacity: 0
              },
              itemStyle: {
                opacity: 0
              }
            },
            {
              name: '距离',
              type: 'line',
              xAxisIndex: 1,
              yAxisIndex: 6,
              data: [],
              animation: false,
              lineStyle: {
                opacity: 0
              },
              itemStyle: {
                opacity: 0
              }
            },
            {
              name: '均缸1',
              type: 'line',
              xAxisIndex: 1,
              yAxisIndex: 6,
              data: [],
              animation: false,
              lineStyle: {
                opacity: 0
              },
              itemStyle: {
                opacity: 0
              }
            },
            {
              name: '均缸2',
              type: 'line',
              xAxisIndex: 1,
              yAxisIndex: 6,
              data: [],
              animation: false,
              lineStyle: {
                opacity: 0
              },
              itemStyle: {
                opacity: 0
              }
            },
            {
              name: '手柄',
              type: 'line',
              xAxisIndex: 1,
              yAxisIndex: 6,
              data: [],
              animation: false,
              lineStyle: {
                opacity: 0
              },
              itemStyle: {
                opacity: 0
              }
            },
            {
              name: '事件名称',
              type: 'line',
              xAxisIndex: 1,
              yAxisIndex: 6,
              data: [],
              animation: false,
              lineStyle: {
                opacity: 0
              },
              itemStyle: {
                opacity: 0
              }
            },
            {
              name: '机车工况',
              stack: '机车工况',
              type: 'bar',
              xAxisIndex: 1,
              yAxisIndex: 7,
              seriesLayoutBy: 'row',
              data: [],
              label: {
                  show: false,
                  position: 'insideRight'
              },
              barWidth: 2,
              animation: false
            },
            {
              name: '过分相',
              stack: '过分相',
              type: 'bar',
              xAxisIndex: 0,
              yAxisIndex: 8,
              seriesLayoutBy: 'row',
              data: [],
              barWidth: 3,
              animation: false
            },
            {
              name: '过站中心',
              stack: '过站中心',
              type: 'bar',
              xAxisIndex: 0,
              yAxisIndex: 8,
              seriesLayoutBy: 'row',
              data: [],
              barWidth: 2,
              animation: false
            },
            {
              stack: '信号量',
              type: 'bar',
              xAxisIndex: 2,
              yAxisIndex: 6,
              barCategoryGap: '0%',
              seriesLayoutBy: 'row',
              data: [],
              label: {
                  show: false,
                  position: 'insideRight'
              },
              animation: false
            },
            {
              stack: '信号量',
              type: 'bar',
              xAxisIndex: 2,
              yAxisIndex: 6,
              barCategoryGap: '0%',
              seriesLayoutBy: 'row',
              data: [],
              label: {
                  show: false,
                  position: 'insideRight'
              },
              animation: false
            }
          ]
        }
      }
    },
  },
  mounted() {
    if(this.list.length>0){
      this.xNumber = this.list.length
    }
    console.log('xNumber',this.xNumber)
    console.log('currentPoint',this.currentPoint,this.cursor1Obj)
  },
  methods: {
    getChartOption() {
        const xAxis = [{
            data: []
          }, // 公里标
          {
            data: []
          }, // 时间
          {
            data: []
          } // 信号（隐藏轴）
        ]
        const yAxis = this.initOptions.yAxis.map((item) => {
          if (item.id === 'speed' || item.id === 'speedLimit') {
            item.max = this._yMax
          }
          if (item.id === 'rotateSpeed') {
            item.max = this._yMax * 10
          }
          return item
        })
        const series = [{
            data: []
          }, // 速度
          {
            data: []
          }, // 转速
          {
            data: []
          }, // 限速
          {
            data: []
          }, // 管压
          {
            data: []
          }, // 缸压
          {
            data: []
          }, // 零位
          {
            data: []
          }, // 信号灯
          {
            data: []
          }, // 定标
          {
            data: []
          }, // 信号机
          {
            data: []
          }, // 距离
          {
            data: []
          }, // 均缸1
          {
            data: []
          }, // 均缸2
          {
            data: []
          }, // 手柄
          {
            data: []
          }, // 事件名称
          {
            data: []
          }, // 机车工况
          {
            data: []
          }, // 过分相
          {
            data: []
          }, // 过站中心
          {
            data: []
          }, // 信号灯一
          {
            data: []
          } // 信号灯二
        ]
        var that = this
        if (that.list && that.list.length > 0) {
          for (let i = 0; i <= that.xNumber; i++) {
            let index = that.ins + i
            const current = that.list[index] || {}
            const prev = that.list[index - 1] || {}
            const next = that.list[index + 1] || {}
            xAxis.map((x, index) => {
              switch (index) {
                case 0: // 公里标
                  x.data.push(current.kiloMeter || 0)
                  break
                case 1: // 时间
                  x.data.push(this.strainer(new Date(current.time), 'HH:mm:ss'))
                  break
                case 2: // 信号量（隐藏轴）
                  x.data.push(0)
                  break
                default:
                  x.data.push(0)
                  break
              }
            })
            /**
             * 只有进站信号机为两个灯，出站，通过，预告是一个灯，不分信号颜色。
             **/
            // 若是当前信号机为空，则获取前一个信号机作为当前信号机
            const signalMachine = (current.signalMachine || prev.signalMachine || '').replace(/^\s*|\s*$/g, '')
            const signalHandles = ['进站', '出站', '通过', '预告']
            // 先去除数字部分, 获得信号机手柄
            const preText = signalMachine.replace(/[0-9]\s*/ig, '')
            // 信号机编号
            const signalNumber = signalMachine.replace(/[^0-9]/ig, '')
            let colorNum = ''
            // 是否显示信号机
            let showSymbol = false
            const signStatus = current.signals || '无'
            const cabSignal = signStatus.replace(/['灯', '闪']/g, '') || '无'
            const signParams = {
              value: 0,
              symbol: '-',
              showSymbol,
              cabSignal
            }
            Object.assign(current, {
              signalNumber
            })
            // 判断是否显示信号机
            if (signalMachine && (current.signalMachine || '').replace(/^\s*|\s*$/g, '') !== (prev.signalMachine || '').replace(/^\s*|\s*$/g, '') && ~signalHandles.findIndex(text => preText === text) && signalNumber) {
              showSymbol = true
              // 若是进站，则需要显示两个灯，否则只显示一个灯
              if (preText === '进站') {
                colorNum = '-2'
              } else {
                colorNum = ''
              }
              Object.assign(signParams, {
                value: 140,
                symbol: `image://${this.LightObj[showSymbol ? `${signStatus}${colorNum}` : '-']}`,
                label: {
                  show: showSymbol,
                  position: 'bottom',
                  formatter: signalNumber,
                  color: '#0098f0',
                  fontSize: 9,
                  offset: [10, -41]
                }
              })
            }
            let mineColor1 = '#333333'
            let mineColor2 = '#333333'
            if (cabSignal === '无') {
              mineColor1 = '#333333'
              mineColor2 = '#333333'
            } else if (cabSignal.length === 2) {
              mineColor1 = this.colorObj[cabSignal[0]]
              mineColor2 = this.colorObj[cabSignal[1]]
            } else if (cabSignal.length === 1) {
              mineColor1 = this.colorObj[cabSignal]
              mineColor2 = this.colorObj[cabSignal]
            }
            series.map((s, index) => {
              switch (index) {
                case 0: // 速度
                  s.data.push(current.speed || 0)
                  break
                case 1: // 转速
                  s.data.push(current.speedElectricity || 0)
                  break
                case 2: // 限速
                  s.data.push(current.rateLimit || 0)
                  break
                case 3: // 管压
                  s.data.push(current.pipePressure || 0)
                  break
                case 4: // 缸压
                  s.data.push(current.cylinderPressure || 0)
                  break
                case 5: // 零位
                  s.data.push(current.zeroBit === '零位' ? 0 : 1)
                  break
                case 6: // 信号灯
                  s.data.push(signParams)
                  break
                case 7: // 定标
                  if (!current.eventItem) break
                  s.data.push({
                    value: ~current.eventItem.indexOf('定标') ? 10 : 0,
                    itemStyle: {
                        color: 'yellow'
                    }
                  })
                  break
                case 8: // 信号机
                  s.data.push(current.signalMachine || '无')
                  break
                case 9: // 距离
                  s.data.push(current.distance || 0)
                  break
                case 10: // 均缸1
                  s.data.push(current.cylinder1 || 0)
                  break
                case 11: // 均缸2
                  s.data.push(current.cylinder2 || 0)
                  break
                case 12: // 手柄
                  s.data.push(`${current.zeroBit||''}${current.frontBehind ||''}${current.transaction ||''}` || '无')
                  break
                case 13: // 事件名称
                  s.data.push(current.eventItem)
                  break
                case 14: // 机车工况
                  if (!current.eventItem) break
                  s.data.push({
                    value: ~current.eventItem.indexOf('机车工况') ? 1 : 0,
                    itemStyle: {
                        color: '#ff00ff'
                    }
                  })
                  break
                case 15: // 过分相
                  const showGFX = current.eventItem === '过分相' // 是否显示过分相
                  s.data.push({
                    value: showGFX ? 10 : 0,
                    itemStyle: {
                        color: 'rgb(255,0,255)'
                    },
                    label: {
                      show: showGFX,
                      position: 'top',
                      distance: 5,
                      formatter: current.eventItem,
                      color: '#ffffff',
                      fontWeight: 'bold'
                    }
                  })
                  break
                case 16: // 过站中心
                  const showGZZX = next.eventItem === '过站中心' // 是否显示过站中心
                  s.data.push({
                    value: showGZZX ? 10 : 0,
                    itemStyle: {
                        color: '#fff'
                    },
                    label: {
                      show: showGZZX,
                      position: 'top',
                      distance: 5,
                      formatter: current.signalMachine || next.eventItem,
                      color: '#fff',
                      fontWeight: 'bold'
                    }
                  })
                  break
                case 17: // 信号量1
                  s.data.push({
                    value: 30,
                    itemStyle: {
                        color: mineColor1
                    }
                  })
                  break
                case 18: // 信号量2
                  s.data.push({
                    value: 30,
                    itemStyle: {
                        color: mineColor2
                    }
                  })
                  break
                default:
                  break
              }
            })
          }
        }
        const result = {
          xAxis,
          yAxis,
          series
        }
        return result
      },
    handleStyle() {
      let style = {};
      style = {
        width: this.width + 'px',
        height: this.height + 'px',
        zIndex: 2
      };
      return style;
    },
    initChart(value) {
      const chartDom = this.$refs.mainChart;
      this.chart = echarts.init(chartDom);
      console.log('list***********',this.list)
      let result = this.getChartOption()
      console.log('result',result)
      this.initOptions.xAxis.forEach((item,index) => {
        result.xAxis.forEach((it,i) => {
          if(index == i){
            item.data = it.data
          }
        })
      })
      this.initOptions.yAxis = result.yAxis
      this.initOptions.series.forEach((item,index) => {
        result.series.forEach((it,i) => {
          if(index == i){
            item.data = it.data
          }
        })
      })
      this.chart.setOption(this.initOptions);
      this.chart.on('click', params => {
        console.log('params.name',params,params.name)
        if(params.name.includes(':')){
          this.$emit('clickIdxChart', params.name);
        }
        // if (params.name == this.datasList[this.datasList.length - 1]) {
        //   const times = this.currentList[this.currentList.length - 1];
        //   this.$emit('clickIdxChart', times);
        // } else {
        //   this.$emit('clickIdxChartChange', params.name);
        // }
      });
    },
    chartClick(index) {
      return index;
    },
    getLineStyle(item) {
      return {
        width: 'auto',
        height: '100%',
        borderLeft: `${
          item === this.cursor1 || item === this.cursor2 ? 2 : 0
        }px solid #008989`,
        cursor: 'move'
      };
    },
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleDragOver(e, item) {
      e.dataTransfer.dropEffect = 'move'; // e.dataTransfer.dropEffect="move"; // 在dragenter中针对放置目标来设置!
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = 'move'; // 为需要移动的元素设置dragstart事件
      if (this.dragging === this.cursor1 && item !== this.cursor2) {
        this.dragging = this.cursor1 = item;
      }
      if (this.dragging === this.cursor2 && item !== this.cursor1) {
        this.dragging = this.cursor2 = item;
      }
    },
    xAxisHandle(num) {
      const xNumber = this.xNumber + num;
      if (xNumber > 100 || xNumber <= 20) return;
      // this.xNumber = xNumber;
      this.chart.xNumber = xNumber;
    },
    yAxisHandle(num) {
      const yMax = this.yMax + num;
      if (yMax > 680 || yMax < 120) return;
      // this.yMax = yMax;
      this.chart.yMax = yMax;
    },

  },
  activated(){
    this.initChart();
  },
  watch: {
    isCollapse: {
      handler(newV, oldV) {
        setTimeout(() => {
          this.chart.resize();
        }, 200);
      },
      deep: true
    },
    'currentType':{
      handler(newV,oldV){
        if(newV==1){
          // this.chart.list = this.list || [];
          // this.chart.indexLKj = this.currentIndex;
          this.initChart();
        }
      }
     }
  }
};
</script>
<style scoped>
.chart-container {
  height: 100%;
  position: relative;
  background-color: rgb(9, 22, 29);
}
.chart-container .chart-box {
  width: 100%;
  height: 100%;
}
/deep/.el-divider--horizontal {
  margin: 12px 0;
}
.chart-container .chart-box .table-button {
  display: flex;
  justify-content: center;
}
.chart-container .chart-box .table-content {
  display: flex;
  justify-content: center;
  padding: 15px 15px;
}
.chart-container .chart-box .handle-box {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 0.4rem;
  /* height: 100%; */
  height: calc(100vh - 270px);
}
.chart-container .chart-box .handle-box .handle-content {
  display: flex;
  justify-content: space-between;
}
.chart-container .chart-box .mainChart {
  width: 100%;
  height: calc(100vh - 270px);
  z-index: 1;
}
.chart-container .chart-box .mainChart>div{
  width: 100%;
  height: 100%;
}
</style>
